<template>
  <div class="view">
    <div class="user-basic-card">
      <div class="u-lf">
        <UserAvatar />
        <div class="u-lf-r">
          <div class="u-name">
            {{ userStore.name }}
            <el-button link type="danger" style="font-weight: 600"
              >VIP</el-button
            >
          </div>
          <div class="u-item">当前积分：{{ userInfo.integration }}</div>
          <div class="u-item">当前成长值：{{ userInfo.growth }}</div>
        </div>
      </div>
      <div class="u-rt">
        <div class="u-r-item">
          <div class="u-r-item-label">累计消费</div>
          <div class="u-r-item-val">{{ userInfo.consumeAmount }}</div>
        </div>
        <div class="u-r-item">
          <div class="u-r-item-label">累计优惠</div>
          <div class="u-r-item-val">{{ userInfo.couponAmount }}</div>
        </div>
      </div>
    </div>
    <div class="u-card-list">
      <div class="u-card">
        <div class="u-card-wrapper">
          <div class="u-card-title">优惠券</div>
          <div class="u-card-lf">
            <el-icon size="40"><Ticket /></el-icon>
            <div class="u-card-val">
              {{ userInfo.couponCount }}<span>张</span>
            </div>
          </div>
        </div>
      </div>
      <div class="u-card">
        <div class="u-card-wrapper">
          <div class="u-card-title">我的收藏</div>
          <div class="u-card-lf">
            <el-icon size="40"><Ticket /></el-icon>
            <div class="u-card-val">
              {{ userInfo.collectProductCount }}<span></span>
            </div>
          </div>
        </div>
      </div>
      <div class="u-card">
        <div class="u-card-wrapper">
          <div class="u-card-title">我的订单</div>
          <div class="u-card-lf">
            <el-icon size="40"><Ticket /></el-icon>
            <div class="u-card-val">
              {{ userInfo.orderCount }} <span></span>
            </div>
          </div>
        </div>
      </div>
      <div class="u-card">
        <div class="u-card-wrapper">
          <div class="u-card-title">我的评价</div>
          <div class="u-card-lf">
            <el-icon size="40"><Ticket /></el-icon>
            <div class="u-card-val">{{ userInfo.commentCount }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import UserAvatar from "@/views/system/user/profile/userAvatar";
import useUserStore from "@/store/modules/user";
import {
  getUserMemberInfo,
  listUserComment,
} from "@/api/mall/client/user/user";
const userStore = useUserStore();
const userInfo = ref({});
// 获取信息
const getMemberInfo = async () => {
  const res = await getUserMemberInfo();
  userInfo.value = res.data;
};
// getMemberInfo();

const commentList = ref([]);
const total = ref(0);
const getCommentList = async () => {
  const res = await listUserComment();
  commentList.value = res.data;
  total.value = res.total;
};

Promise.all([getMemberInfo(), getCommentList()]);
</script>
<style lang="scss" scoped>
.user-basic-card {
  // background: #fff6e6;
  border: 1px solid #f4f4f4;
  background: #f4f4f4;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  .u-lf {
    display: flex;
    align-items: center;
    .u-lf-r {
      margin-left: 10px;
      .u-name {
        display: flex;
        align-items: center;
      }
      .u-item {
        font-size: 14px;
      }
    }
  }
  .u-rt {
    display: flex;
    align-items: center;
    .u-r-item {
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .u-r-item-label {
        font-size: 14px;
        font-weight: 600;
        color: #1aa684;
      }
      .u-r-item-val {
        font-size: 14px;
        color: #1aa684;
      }
    }
  }
}
.u-card-list {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .u-card {
    width: 20%;
    box-sizing: border-box;

    .u-card-wrapper {
      border-radius: 10px;
      background: #1aa684;
      padding: 15px;
      color: #fff;
      display: flex;
      // align-items: center;
      // justify-content: space-between;
      flex-direction: column;
      .u-card-lf {
        display: flex;
        justify-content: space-between;
      }
      .u-card-val {
        font-size: 30px;
        span {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
